WORKSHOP 


AllWebMenus LITE 4 


Wat staat er op het menu? 


Een goed navigatiemenu is onmisbaar voor elke webstek. 
Uitklapmenu's zijn daar zeer geschikt voor. Alleen zijn die 
dingen niet zo makkelijk te programmeren. Met AllWeb- 
Menus hoeft dat niet langer: deze tool maakt die menu's 
in jouw plaats! f\_TOON VAN DAELE 


« \ 
WAT DOEN WE? 


WAARMEE? 


UUR? 


MOEILIJKHEID? 


p de dvd bij dit nummer vind je de gratis 

versie van AllWebMenus LITE 4. Hiermee kan 
je knappe uitklapmenu's creëren, die zich met een 
druk op de knop in je webpagina's nestelen. Elke 
moderne browser kan probleemloos met deze menu'’s 
overweg — voor de kenners: de onderliggende code 
is dhtml. De menu's worden wel alleen maar zichtbaar 
als je op die pagina’s een bescheiden link naar de site 
van de producent opneemt (zie stap 9). Vind je dat 
storend, dan kan je nog altijd upgraden naar de com- 
merciële versie van AllWebMenus LITE (circa € 27) of 
naar AllWebMenus Pro (tijdelijk circa € 31). Deze 
laatste versie laat onder meer afbeeldingen toe in je 
menu's. Op de site kan je trouwens ook terecht voor 
mk allerlei extra’s — zoals uitbreidingen voor Dreamwea- 
Bef > ver en FrontPage, sjablonen en demo’s. 


STAP 1 / WEBPAGINA'S MAKEN 


Om een uitklapmenu aan je webpagina’s 
te kunnen toevoegen, moet je natuur- 
lijk wel eerst over… webpagina's be- 
schikken! Wil je met AllWebMenus expe- 
rimenteren, dan maak je beter eerst 
enkele ‘dummy’ webpagina's aan. Heb je 
de techniek eenmaal beet, dan kan je 
AllWebMenus op (een kopie van) je 
echte pagina’s loslaten. In deze work- 


Eerst je webpagina's, dan de uitklapmenu's. 


shop vertrekken wij van simpele test- 
pagina’s, waarvan de html-code nauwe- 
lijks meer hoeft in te houden dan het volgende: 


<html> 

<head><title>Paginatitel x</title></head> 
<body>Dit is pagina x</body> 

</html> 


Met behulp van Kladblok maak je op deze manier een vijftal pagina’s. 
Je doet er natuurlijk wel goed aan de nodige (wit)ruimte te voorzien 
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MET 30%o MINDER VET !/ 


ALLWEBMENUS LITE 4 


op de plaats waar je het navigatiemenu wil hebben. Maar laten we nu 
eerst een navigatiemenu samenstellen, eentje dat de structuur volgt 
zoals voorgesteld in afbeelding 1. Daarvoor halen we dus AllWebMenus 
boven. 


STAP 2 / ALLWEBMENUS ACTIVEREN 


De speciale LITE-versie van AllWebMenus vind je op de Clickx-dvd die 
bij dit nummer zit. Navigeer naar WegBouwsortware, AutWegMenu’s en klik 
op InsraLteer. De installatie is rechttoe, rechtaan, en je moet niet veel 
meer doen dan enkele keren op Next drukken. Wil je alle opties ontslui- 
ten, dan moet je het product wel even activeren. Daarvoor druk je op 
ACTIVATE YOUR INSTALLATION FOR FREE. In het volgende venster klik je op Take 
ME THERE, @n je belandt op een activeringspagina waar je op de knop 
Actrvate AuuWegMenus LITE v4.0! drukt (zie afbeelding 2). Je e-mailadres 
hoef je niet in te vullen, tenzij je de maandelijkse nieuwsbrief wil ont- 
vangen. Even later verschijnt dan je activeringscode. Schrijf die op of 
kopieer ze. Sluit het browservenster, vul de code in bij Activation cope 
en bevestig met Activate. Nu kan je aan de slag. 


» activation page 


bh Welcome to the Activation Page of AllWebMenus LITE version 4.0 


By activating the fully working, free version of AllWebMenus LITE v4.0 you 
create stylish menus that are fully operational in all IE browsers. By 
upgrading to the most recent version of AllWebMenus you gain full crass- 
browser operability alang with a multitude of new extra features, 


In order to remain up-to-date with the developments in the cross-browser 
arena and benefit from value-added services that we offer for free, we 
strongly recommend that you also join our newsletter which is available 
every month. 


al Een pijnloos 


Enter your Email address to join! | 


> 


Activate AllWebMenus LITE 4.0! ZA 


(en naamloos) 
activerings- 
proces. 


STAP 3 / SJABLOON KIEZEN 


We hebben niet veel zin om het wiel opnieuw uit te vinden, en dus 
maken we dankbaar gebruik van de Treme Garrery van AllWebMenus. 
Krijg je dit venster niet te zien, ga dan naar het menu Fie en kies 
New. Je krijgt nu een lijst te zien met tientallen sjablonen voor uit- 
klapmenu’s, zowel horizontale [H] als verticale [V]. Onderaan het 
voorbeeldvenster kan je PREVIEW WITH DARK BACKGROUND aanvinken: dat 
geeft een realisti- 
scher weergave als 
je webpagina's een 
donkere achter- 

grond hebben. Wij 
Eusosan ble kiezen als voorbeeld 
Mrt ee voor deze workshop 
] Field Green Company Products 


] Grap Red [V] Mysterious. Be- 


| Green ADOUt Downloads 


= Lheme,Gollery, Events &) 
Hieme selection 4 


Choose a theme: 


W]Engraved 4 A 
JEssences Main Group 


] Halywood E vestig je keuze met 
| Ladder 

| Liohts Off 

] Minimal E ding 3). 

] Misery 


] Impact Blue IN e 
Setect (zie afbeel- 
[W] Medical Opinion 
] Monochrome 
M; 


Je hoeft het wiel niet 
meer uit te vinden. 


STAP 4 / STRUCTUUR KIEZEN 


Terug in het hoofdvenster van AllWebMenus zie je links het paneel 
Menu Structure. Desnoods moet je links bovenaan eerst nog het tabblad 
Menu Eprror even aanklikken. Als je ons sjabloon hebt gekozen, dan 
staat daar nu Main Menu Group {cRO}, met drie subcategorieën (telkens 
met de naam Irem). De tweede subcategorie bevat een plusje, en die 
kan je dus verder openklikken. Die bevat op zijn beurt SuBmenu Group 
{eri} en drie sub-subcategorieën. De kans is klein dat deze structuur 
precies overeenkomt met wat jij voor ogen hebt. Gelukkig kan je dat 
snel aanpassen… 

Wat wij willen, is een hoofdgroep met twee items (P1 en P2), waarbij 
het eerste item (P1) een subgroep bevat met twee items (P3 en P4). 
Het tweede item hiervan (P4) opent een subitem (P5). 

In de volgende stap tonen we je hoe je die structuur verkrijgt, vertrek- 
kend van ons sjabloon. 


STAP 5 / ZELF STRUCTUUR AANBRENGEN 


Klik met de rechtermuisknop op het derde item van de Main Menu 
Group en kies in het snelmenu Derere Item. Bevestig met Ja. Klik nu op 
het plusje bij het tweede item van de Main Menu Group, klik vervolgens 
met de rechtermuisknop op SuBMenu Group en kies Derere Entire SuB- 
MENU Group. Bevestig ook nu met Ja. Open het snelmenu van het eerste 
item in de Main Menu Group en kies App SuBMenu Group To item. Standaard 
krijgt deze subgroep al een eerste item mee, maar we hebben er ook 
nog een tweede nodig. Open dus het snelmenu van dit ene item en 
selecteer App Irem. Ten slotte kan je vanuit het snelmenu van dit 
nieuwbakken item een laatste subitem toevoegen. En ziedaar: onder- 
aan rechts in het voorbeeldvenster verschijnt netjes de structuur van 
onze tekening (zie afbeelding 5). 


Menu Editor Style Editor 

Menu Structure Item Properties 
GP Main Menu Group {ar0} it 

JC Item RS 

5 DP Submenu Group {arl} 
| 
È nd he [Assigned Style: Sub Items Style N/, 
E JP Submenu Group {gr2} 
5 


@ Item 


Main Menu Group 


Item 


Meru Edler Se Edtr 


Geef duidelijke namen aan je menu-items. 


STAP 6 / NAMEN GEVEN 


De structuur van je navigatiemenu staat dan wel al op poten, maar met 
benamingen als ‘Main Menu Group’ en Ttem’ zijn je bezoekers natuurlijk 
niet veel. Laten we die dus snel een betere naam geven. Dat gaat heel 
eenvoudig. Klik op Main Menu Group {ero}. Rechts, in het paneel Group 
Properties, zie je het veld Heaper Text staan. Klik dit veld aan, en geef 
een geschikte naam aan de menugroep — in ons voorbeeld is dat Clickx 
goodies. Over nu naar het eerste item in deze hoofdgroep. Klik dit aan 
in het paneel Menu Structure. Rechts, bij Irem Properties, klik je het veld 
Texr aan. Bij NormaL vul je een geschikte naam in. Wil je dat dezelfde 
naam te zien is als de bezoeker er met de muis over gaat (of als hij 
erop klikt), klik dan het dubbele zwartje pijltje aan, rechts van de 
kolom NormaL. Dat zorgt ervoor dat dezelfde naam ook wordt ingevuld 
in de kolommen Mouse Over en Mouse Crick (zie afbeelding 6). 


STAP 7 / LINKS LEGGEN 


Op dezelfde manier kan je nu de resterende items hernoemen. Maar 
daar houdt het niet bij op: we willen namelijk dat de bezoeker naar een 
andere webpagina kan worden geleid als hij een item aanklikt. Met All- 
WebMenus is dat geen probleem. We nemen het tweede item uit de 


VAKTAAL A-M N-Z 


DHTML: Dynamic Hypertext Markup Language. Uitbreiding van gewone html, de taal die 
gebruikt wordt om webpagina's te schrijven. Met dhtml kan je tekst en afbeeldingen beter 
positioneren en interactieve functies toevoegen. De browser van de bezoeker moet het wel 
ondersteunen. 


Clickx Magazine 126 « 22 augustus 2006 


WORKSHOP 


hoofdgroep (het onderste in Menu Structure) als voorbeeld. Dit item 
geven we, net zoals hierboven, eerst een gepaste naam mee. Maar bij 
Irem Properties vind je onder het veld Text nog een veld: Link. Klik dit veld 
aan en druk vervolgens op het knopje met het zwartje pijltje, linksonder 
de kolom Mouse Curck. Een nieuw venster (Prosecr Properties) duikt nu op. 
Daar wordt je naar de rootmap van je site gevraagd. Via de knop Eprr 
leiden we de wizard netjes naar die map — gewoonlijk is dat de map waar 
onder meer ook de startpagina van je site zich bevindt (zie afbeelding 
7). De andere instellingen kan je ongemoeid laten. Bevestig met OK. 
Vervolgens blader je naar de pagina waaraan je het geselecteerde item 
gelinkt wil zien. Selecteer die pagina en bevestig met Openen. Controleer 
of de juiste pagina in de kolom Mouse Crick staat ingevuld. Koppel alle 
gewenste items nu op dezelfde manier aan een (andere) webpagina. 


Item Properties 


Normal Mouse Over Mouse Click 
Shareware Shareware 


Text Shareware 


& Project Properties 


>  Compile Properties Folders 


9 Folder _ Please specify the fallawing compile properties for your menu: 
@D Optimization 


@ FrontPage Support Site_Root folder 

@ Advanced Scripting Where is your Web Site locally stored? (Site Saat folder) 

@ RTL Languages Support [D:ADOCS\sites\Clicksmenus\, it 
3 Preview Panel Settings 


3 Project Info Settings 


Compiled menu name 
What name should your compiled menu have? 
{ Default menujs 


{Custom IS js 


Help OK Cancel Apply 


Wijs AllWebMenus de weg naar je site. 


STAP 8 / HET MENU VORMGEVEN 


We zijn dan wel van een fraai sjabloon vertrokken, maar dat betekent 
niet dat je hier en daar wellicht een ander kleurtje of lijntje had gewild. 
Zo’n stilistische aanpassingen zijn een kolfje naar de hand van de Srtvre 
Eprror, die zich op een apart tabblad bevindt. Links krijg je dan een 
overzicht van de beschikbare stijlen, zoals Main Group Stvre, Main Items 
SryLe, SuB Groups StyLe en Sug Irems Sryre. Selecteer er één van, en rechts 
verschijnen de bijhorende velden. Klik een veld aan om de instellingen te 
kunnen aanpassen. We beperken ons hier tot één voorbeeldje. Klik Marn 
Irems SrvLe aan. Stel even dat je de achtergrondkleur groen wil zien op- 
lichten als de bezoeker met de muis over zo’n hoofditem gaat. Klik dan 
bij Main Items Stvue het veld Backarounp Coror aan. Vervolgens klik je op 
het kleurpictogram in de kolom Mouse Over, waarna je een geschikte kleur 
aanwijst in het palet (zie afbeelding 8). Bevestig met OK. 


Meru Edtar Spe Edna 
Avadable Stylae 
Mon Gr 


Subs Groups Myke 
| Su eens Se 


Binnenhuisarchitect aan het werk... 


STAP 9 / CODE GENEREREN 


Zo, ons menu ziet er al aardig uit. Nu moeten we dit nog effectief op onze 
webpagina's zien te krijgen! Klik daarvoor bovenaan in de werkbalk op de 
knop Compie Menu. Bevestig met Continue. Aangezien je het navigatiemenu 
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nog niet eerder aan je pa- 
gina’s hebt gelinkt, druk je 
vervolgens op de knop Link 
MENU TO WEB PAGES (zie af- 
beelding 9). Vooraleer je 
dat doet, kijk je in dit- 
zelfde venster wel eerst 
nog even na of de ‘si- 
teroot’ wel naar de cor- 
recte map verwijst. Ver- 


2IA reaared dyn mage woad lo tesobre older browser meifcences. 
Sie Ao ait 


The mboldee Pya contains the reaumed menubuldng Rorares (awk it) 


You musl now hek, he compie mer bo your ved pages. 


« Yes, l Ark ihe genesated wach lrequïsed step if not dane get) 
volgens selecteer je alle ed oe dede B aeg 


webpagina's waarin je het ne ee 
navigatiemenu wil onder- 


Lank, Back, vegaoed bot mer lo appea - 
brengen. Druk vervolgens 


Odeon Irna 
Viv hal matructiona on hoer In nostion vna mers on wann maes 


op het knopje met de dub- _AllWebMenus moet eerst nog de nodige code genereren. 


bele pijl in het midden. 

Rond de procedure af met de knop Link. Bevestig met Ja en daarna met 
PREVIEW PAGE. 

Je browser start op. Mogelijk moet je de geblokkeerde, actieve inhoud 
wel eerst nog toestaan. Wat nu! Niks te zien? Geen paniek. Zoals gezegd 
vereist deze gratis versie dat je een verwijzing op die pagina(s) opneemt 
naar de site van de producent. Welke html-code je precies moet toevoe- 
gen, lees je op www.likno.com/linkbackinstructionslite.php. Zodra je deze code 
in de pagina('s) hebt opgenomen, kan je meteen met het uitklapmenu 
aan de slag! 


STAP 10 / PLAATSEN 


Standaard belandt het navigatiemenu linksboven in je browservenster. 
Dat is misschien niet altijd wenselijk. Maar geen nood: het is nog altijd 
mogelijk om het menu exact daar neer te planten waar jíj dat wil. Stel 
even dat je het op 100 pixels van de linkerrand en 150 van de bovenrand 
van het browservenster wil. Ga dan als volgt te werk. Open het tabblad 
Menv Eprror en klik de hoofdgroep van je menu aan. Rechts, bij Group 
Properties, klik je op het veld Posrrronine, en vervolgens op het kleine 
zwarte pijltje. Er verschijnt een nieuw dialoogvenster waar jij bij Orrser X 
100 invult, en bij Orrser Y 150. Had je het menu graag in een andere hoek, 
pas dan de instelling aan bij Winpow or ELEMENT Corner (zie afbeelding 10). 
Het aangepaste menu moet natuurlijk opnieuw ‘gecompileerd’ worden. 
Druk hiervoor in de werkbalk op de knop Comerue menu en bevestig met 
Continue. Dat is alles — de knop Link menu To weB Paas hoef je dus niet meer 
(opnieuw) in te drukken! 

Het is ook perfect mogelijk om het menu bijvoorbeeld in een lege tabel- 
cel op je pagina te laten terechtkomen. Jammer genoeg valt dit buiten 
het bestek van deze workshop. Maar het helpbestand van AllWebMenus 
zet je al een heel eind op weg. « 


Meru Edo Slye Eter 


Mory Struetwe Group Properties 
= @ Freeware 
— GP Suteranu Group 91) 
@ Operteon Automaticaliy show Main Menu on page load 
= S Andere Select te kohonerg stachmert pu ameter: = 
bd rented ManMerfnschedio [windo El oe 
SD Sharemere Weom on Elmer Coomer (EEN | rn 


Offset Pao Im 
Olsen 150 Tjen 
Man Merus Gaoup Comer Ei 


re 


For poadiring to ke allect an seur wab paoels) ih nnie 
geze mate van that 

1. You zomcde your menu Link Back. code reaared lor menu lo 

2 You have your merus ahead ò ed to your papel) Och heen fox Ordre \ratruchoos 


Plant het menu op een geschik plekje neer! 


AU he above fedand folder: must be uploeded at ezactiy the same disectory structure on pour server. 
Ste Foor de rara) 


